<template>
  <div class="top">
    <h2 class="h2">优惠券搜索</h2>
    <div class="back" v-on:click="fn()">&lt;</div>
    <div class="keyin">
      <div @click="tanchu()" class="select">{{ select }}</div>
      <input
        @keydown.enter="gopai()"
        class="ipt"
        type="text"
        placeholder="请输入关键词、淘口令以搜索优惠券"
      />
    </div>
  </div>
</template>

<script>
import EventBus from "@/eventBus";
export default {
  data() {
    return {
      select: "全部商品",
    };
  },
  methods: {
    fn() {
      this.$router.go(-1);
    },
    tanchu() {
      EventBus.$emit("sendShow", true);
    },
    gopai(){
        this.$router.push('/paihang')
    }
  },
  mounted() {
    EventBus.$on("sendVal", (val) => {
      this.select = val
    });
  },
};
</script>

<style scoped>
.top {
  height: 93.3rem;
  padding: 0 15rem;
  color: #48575c;
}
h2 {
  font-size: 14rem;
  text-align: center;
  position: relative;
  line-height: 53.67rem;
}
.back {
  position: absolute;
  left: 20rem;
  top: 18rem;
  color: #b2b8b6;
  font-size: 16rem;
}
.keyin {
  height: 30rem;
  /* background: #edefee; */
  display: flex;
  border: 1px solid #eef0ef;
  border-radius: 5rem;
}
.select {
  width: 78rem;
  font-size: 12rem;
  line-height: 30rem;
  position: relative;
  text-align: center;
  padding-right: 9rem;
  background: #eef1f6;
}
.select::before {
  content: "";
  display: block;
  position: absolute;
  right: 7rem;
  top: 12rem;
  border-top: 4.6rem solid #b3c3c3;
  border-bottom: 4.6rem solid transparent;
  border-right: 3.8rem solid transparent;
  border-left: 3.8rem solid transparent;
}
.select::after {
  content: "";
  display: block;
  position: absolute;
  right: 0rem;
  top: 5rem;
  width: 1px;
  height: 17.33rem;
  background: #b3c3c3;
}
.ipt {
  flex: 1;
  background: #eef1f6;
  padding-left: 8rem;
}
.ipt::placeholder {
  font-size: 12rem;
  color: #b4bdbc;
}
</style>
